<template>
  <div >
    <tabbar class="bottom">
      <tabbar-item :selected="value === 0" link="/">
        <img slot="icon" src="../../static/icon/home-no.png">
        <img slot="icon-active" src="../../static/icon/home-select.png">
        <span slot="label">首页</span>
      </tabbar-item >
      <tabbar-item :selected="value === 1" link="/goodstype">
        <img slot="icon" src="../../static/icon/shop-no.png">
        <img slot="icon-active" src="../../static/icon/shop-select.png">
        <span slot="label">商品</span>
      </tabbar-item>
      <tabbar-item :selected="value === 2" link="/forum">
        <img slot="icon" src="../../static/icon/forum-no.png">
        <img slot="icon-active" src="../../static/icon/forum-select.png">
        <span slot="label">论坛</span>
      </tabbar-item>
      <tabbar-item :selected="value === 3"  link="/my">
        <img slot="icon" src="../../static/icon/my-no.png">
        <img slot="icon-active" src="../../static/icon/my-select.png">
        <span slot="label" >我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  name: 'Btabbar',
  props: { value: Number },
  // data () {
  //   return {
  //     value:1
  //   }
  // },
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>

<style scoped>
.bottom {
  position: fixed;
  bottom: 0;
  left:0;
  background: #fff;
}
</style>

